<div>
  <h1>Artworks:</h1>
  @if (items$ | async; as items) {
    <div class="gallery-container">
      @for (galleryItem of items; track trackByFn($index, galleryItem)) {
        <div>
          <h2>{{ galleryItem.title }}</h2>
          <img [alt]="galleryItem.title" [src]="galleryItem.image" />
          @if (!galleryItem.open) {
            <div class="pointer" (click)="toggleItemOpen(galleryItem.id)">
              click for more details
            </div>
          }
          @if (galleryItem.open) {
            <div class="pointer" (click)="toggleItemOpen(galleryItem.id)">
              {{ galleryItem.description }}
            </div>
          }
        </div>
      }
    </div>
  }
</div>
